<template>
  <div class="card-inner-right">
    <h1 style="margin-bottom: 5px;font-size: 30px">欢迎登录</h1>
    <h3 style="margin-bottom: 10px;">Welcome aboard</h3>
    <el-form ref="loginRuleFormRef"
             :model="loginForm"
             :rules="loginRules">
      <el-form-item label="账号:" prop="email">
        <el-input v-model="loginForm.email" placeholder="Please enter email"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="loginForm.password" placeholder="Please enter password" show-password
                  type="password"></el-input>
      </el-form-item>
    </el-form>
    <div class="button-login" @click="onSubmit">登录</div>
    <div class="message"><span>还没有账号？</span><span class="clickable-text"
                                                       @click="$emit('switch-to-register')">去注册</span></div>
  </div>
</template>
<script setup>
import {ref, watch} from "vue";
import {loginApi, setCookie, parseJwt} from '~/api/manager.js'
import router from "~/router/index.js";

const props = defineProps(['userEmail']);
const loginForm = ref({
  email: '',
  password: ''
});
loginForm.value.email = props.userEmail
const loginRuleFormRef = ref(null)
const loginRules = {
  email: [
    {required: true, message: '邮箱不能为空', trigger: 'blur'},
    {type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change']},
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {min: 4, message: '密码至少需要4个字符', trigger: 'blur'},
  ],
};

async function onSubmit() {
  try {
    // 验证表单
    await loginRuleFormRef.value.validate();

    // 调用登录 API
    const res = await loginApi(loginForm.value);
    // console.log(res.data.data)
    if (res.data.code === 200) {
      // 设置 cookie
      setCookie("yuan-token", JSON.stringify(res.data.data), 1);

      // 跳转到首页
      const result = await router.push({path: '/index'});
      // console.log('跳转结果',result);
      if (result) {
        // console.log('跳转成功');
      } else {
        // console.log('跳转失败');
      }
      // 输出解析后的 token
      // console.log(parseJwt(JSON.stringify(res.data.data)));
    } else {
      // console.error('登录失败',res.data.code);
    }


  } catch (error) {
    // 处理验证错误
    if (error.name === 'ValidateError') {
      console.error('验证失败', error);
      // 这里可以添加提示用户的逻辑
    } else {
      // 处理 API 调用错误
      console.error('登录失败', error);
      // 这里可以添加提示用户的逻辑
    }
  }
}


</script>
<style scoped>
.card-inner-right {
  min-width: 320px; /* 最小宽度 */
  min-height: 380px; /* 最小高度 */
  background-color: white; /* 背景颜色为白色 */
  border-radius: 8px; /* 圆角半径为20px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 边框阴影 */
  padding: 20px; /* 内边距，视情况可调整 */
  margin: 0px; /* 外边距，视情况可调整 */
}

.button-login {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 内容左右居中 */
  align-items: center; /* 内容上下居中 */
  background-color: #518dec; /* 背景颜色为蓝色 */
  color: white; /* 字体颜色为白色 */
  padding: 5px 0; /* 上下内边距为5px，左右内边距为0 */
  border-radius: 8px; /* 圆角半径为5px */
  cursor: pointer;
}

.message {
  padding: 2px;
  margin: 10px;
}

.clickable-text {
  color: blue; /* 字体颜色为蓝色 */
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  transition: color 0.3s; /* 添加过渡效果 */
}

.clickable-text:hover {
  color: darkblue; /* 鼠标悬停时字体颜色变为深蓝色 */
}
</style>